<template>
	<div class="pageHeader">
		<div class="pageHeader_new" @click="getTname('新材料')">
			<span :class="tname=='新材料'?'active':''" v-if="baseData.length">{{baseData[2].total}}</span>
			<img v-if="tname=='新材料'" src="../../../public/images/enterprise/newMaterial-on1@2x.png" alt="">
			<img v-else src="../../../public/images/enterprise/newMaterial-off1@2x.png" alt="">
		</div>
		<div class="pageHeader_list">
			
			<div class="pageHeader_list_item" @click="getTname('磁性材料')">
				<span  :class="tname=='磁性材料'?'active':''" v-if="baseData.length">{{baseData[1].total}}</span>
				<img v-if="tname=='磁性材料'" src="../../../public/images/enterprise/rareEarth-on1@2x.png" alt="">
				<img v-else src="../../../public/images/enterprise/rareEarth-off1@2x.png" alt="">
			</div>
			<div class="pageHeader_list_item" @click="getTname('稀土永磁材料')">
				<span :class="tname=='稀土永磁材料'?'active':''" v-if="baseData.length">{{baseData[0].total}}</span>
				<img v-if="tname=='稀土永磁材料'" src="../../../public/images/enterprise/magnetic-on1@2x.png" alt="">
				<img v-else src="../../../public/images/enterprise/magnetic-off1@2x.png" alt="">
			</div>
		</div>
	</div> 
</template> 

<script>
	name:'pageHeader'
	export default{
		data() {
			return{
				tname:'新材料',
				baseData:[] //材料个数
			}
		},
		mounted() {
			this.getBasedata()
		},
		methods:{
			// 获取材料个数
			async getBasedata(){
				var dt = {
					"params": {
						"normGuid": "16ec18e1-f00c-4544-be3a-8fb5a105a8e6",
							"fieldList": []
						}
				};
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.baseData=result.cockpitData
			},
			// 切换当前选中材料
			getTname(e){
				this.tname=e
				this.$bus.$emit('upTname',e)
			}
		}
	}
</script>

<style lang="stylus" rel='stylesheet/stylus' scoped>
	@import "~@/assets/pageHeader.styl"
</style>
